<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
.col-sm-12{padding-left:5px;padding-right:5px;}
.wrapper-content {padding: 2px;}
.ibox {margin-bottom: 5px;}
div.bar {
    background: url("/assets/img/vote_cl_bar.png") no-repeat 0px 0px;
    margin: 3px 0px 0px;
    padding: 0px 0px 0px 1px;
    width: 152px;
    height: 16px;
    text-align: left;
    float: left;
}
div.bar .precent {
	overflow: hidden;
}
div.bar img {
	padding: 0px; border: 0px currentColor; border-image: none;vertical-align: baseline;
}
.tableResult {
	border-top-color: rgb(215, 215, 215); border-left-color: rgb(215, 215, 215); border-top-width: 1px; border-left-width: 1px; border-top-style: solid; border-left-style: solid;
}
.tableResult td {
	border-right-color: rgb(215, 215, 215); border-bottom-color: rgb(215, 215, 215); border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-style: solid;
}
table tr:nth-child(odd) {
  background-color:#F5F5F5;
}
table tr:nth-child(even) {
  background-color:#fff;
}
</style>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
	<div class="col-sm-12">
		<h1 th:utext="${qnpub.name}"></h1>
		<a style="margin-left:20px;" class="btn btn-primary btn-rounded btn-sm" onclick="outEChart()"><i class="fa fa-Example offile-excel-o"></i>&nbsp;分题图表统计导出</a>
		<a class="btn btn-warning btn-rounded btn-sm" onclick="outTable()"><i class="fa fa-Example offile-excel-o"></i>&nbsp;分题列表统计导出</a>
		<button class="btn btn-warning btn-rounded btn-sm" onclick="printpage()"><i class="fa fa-print"></i>&nbsp;打印</button>
	</div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">	
	<div class="row" th:each="qnr: ${qnreport}">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5 th:text="${#ids.seq('')}+'.'+${qnr.question.name}"></h5>
				</div>
               	<div class="ibox-content">
<th:block th:if="${qnr.question.qtid} &lt; 5">            	
<TABLE class="tableResult" style="width: 100%; border-collapse: collapse; background-color: rgb(224, 224, 224);" border="0" cellspacing="0" cellpadding="3" >
  <TR class="text2" style="font-weight: bold;">
    <TD style="width:200px;padding-left:20px;">选项</TD>
    <TD style="width: 50px; white-space: nowrap;padding-left:20px;">小计</TD>
    <TD style="padding-left:20px;">比例</TD>
  </TR>
  <TR>
    <TD class="ansa" val="1" th:text="${qnr.question.ansA}"></TD>
    <TD class="ctna" align="center" th:text="${qnr.ctna}"></TD>
    <TD th:with="a=(${qnr.actn}) ==0 ? 0 : ${qnr.ctna}*100/${qnr.actn},aper=${#numbers.formatDecimal(a,1,2)}">
      <DIV class="bar">
      	<DIV class="precent" th:style="'width:'+ ${aper}+'%; display: block;'">
      		<IMG width="149"  height="13" alt="" th:src="@{/assets/img/vote_cl_v2.png}">
      	</DIV>
      </DIV>
      <DIV style="margin-top: 3px; float: left;">[[${aper}]]%</DIV>
      <DIV style="clear: both;"></DIV>
    </TD>
  </TR>
  <TR>
    <TD class="ansb" val="2" th:text="${qnr.question.ansB}"></TD>
    <TD class="ctnb" align="center" th:text="${qnr.ctnb}"></TD>
    <TD th:with="a=(${qnr.actn}) ==0 ? 0 : ${qnr.ctnb}*100/${qnr.actn},aper=${#numbers.formatDecimal(a,1,2)}">
      <DIV class="bar">
      	<DIV class="precent" th:style="'width:'+ ${aper}+'%; display: block;'">
      		<IMG width="149"  height="13" alt="" th:src="@{/assets/img/vote_cl_v2.png}">
      	</DIV>
      </DIV>
      <DIV style="margin-top: 3px; float: left;">[[${aper}]]%</DIV>
      <DIV style="clear: both;"></DIV>
    </TD>
  </TR>
  <TR>
    <TD class="ansc" val="3" th:text="${qnr.question.ansC}"></TD>
    <TD class="ctnc" align="center" th:text="${qnr.ctnc}"></TD>
    <TD th:with="a=(${qnr.actn}) ==0 ? 0 : ${qnr.ctnc}*100/${qnr.actn},aper=${#numbers.formatDecimal(a,1,2)}">
      <DIV class="bar">
      	<DIV class="precent" th:style="'width:'+ ${aper}+'%; display: block;'">
      		<IMG width="149"  height="13" alt="" th:src="@{/assets/img/vote_cl_v2.png}">
      	</DIV>
      </DIV>
      <DIV style="margin-top: 3px; float: left;">[[${aper}]]%</DIV>
      <DIV style="clear: both;"></DIV>
    </TD>
  </TR>
  <TR>
    <TD class="ansd" val="4" th:text="${qnr.question.ansD}"></TD>
    <TD class="ctnd" align="center" th:text="${qnr.ctnd}"></TD>
    <TD th:with="a=(${qnr.actn}) ==0 ? 0 : ${qnr.ctnd}*100/${qnr.actn},aper=${#numbers.formatDecimal(a,1,2)}">
      <DIV class="bar">
      	<DIV class="precent" th:style="'width:'+ ${aper}+'%; display: block;'">
      		<IMG width="149"  height="13" alt="" th:src="@{/assets/img/vote_cl_v2.png}">
      	</DIV>
      </DIV>
      <DIV style="margin-top: 3px; float: left;">[[${aper}]]%</DIV>
      <DIV style="clear: both;"></DIV>
    </TD>
  </TR>
</TABLE>
</th:block>
<th:block th:if="${qnr.question.qtid} &gt; 5">  
<div th:text="${qnr.stuadv}"></div>          	
</th:block>
				</div>
			</div>
		</div>
	</div>
</div>

<div th:include="include :: footer"></div>
<div th:include="include :: echarts-js" ></div> 
<script>
function printpage(){
	window.print();
}
</script>
</body>
</html>

